<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Tooltip from '../components/Tooltip/tooltip.vue';
import father from '../components/learn-test/attrs/father.vue';
import Icon from '../components/Icon/icon.vue';
import Button from '../components/Button/Button.vue';
import Collapse from '../components/Collapse/Collapse.vue';
import CollapseItem from '../components/Collapse/CollapseItem.vue';
import { createMessage } from '../components/Message/method'

const buttonRef = ref<InstanceType<typeof Button>>();
const openCollpaseVal = ref(['1']);
const trigger = ref<any>('click');

const tooltipRef = ref<InstanceType<typeof Tooltip>>();

  // function showTooltip() {
  //   tooltipRef.value?.show();
  // }

  // function hideTooltip() {
  //   tooltipRef.value?.hide();
  // }

onMounted(() => {
  createMessage({ message: 'hello world', duration: 0, showClose: true })
  createMessage({ message: 'hello world again', duration: 0, type: 'success', showClose: true })
  createMessage({ message: 'hello world three', duration: 0, type: 'danger', showClose: true })
  setTimeout(() => {
    openCollpaseVal.value = ['1','2'];
    // trigger.value = 'hover';
  }, 1000);
});
</script>

<template>
  <div>
    <Tooltip ref="tooltipRef" :content="'hello world'" :trigger="trigger" >
      <img src="../assets/vue.svg" alt="" ref="triggerNode">
      
    </Tooltip>
  </div>
<Button loading  ref="buttonRef">primary</Button>
<Button :icon='["fas","user"]'  type="primary" ref="buttonRef">primary</Button>
<Button type="danger" ref="buttonRef">primary</Button>
<Button type="success" ref="buttonRef">primary</Button>
<Button type="info" ref="buttonRef">primary</Button>

<Icon  type='success' icon='arrow-up' size='2xl' spin />

<div style="margin-top: 10px;">
  <Button type="primary" plain>primary</Button>
  <Button type="primary" round>primary</Button>
  <Button type="primary" circle>123</Button>
</div>

<div>
  <Collapse v-model="openCollpaseVal" accordion>
    <CollapseItem  name="1">
      <template #title>
        slottitle
      </template>
      内容1
    </CollapseItem>
    <CollapseItem title="标题2" name="2">内容2</CollapseItem>
    <CollapseItem title="标题3" name="3" disabled>内容3</CollapseItem>
  </Collapse>
</div>

<father></father>
</template>

<style scoped>

</style>
